{% extends "base.html" %}

{% block title %}创建新组{% end %}
{% block navlinks %}
<a class="nav-item nav-link active" href='/user/group_create'>
    <i class="fas fa-users"></i> 创建新组
</a>
{% end %}

{% block content %}
<div class="container">
    <form method="post" action="/api/v1/user/groups" @submit.prevent="submit">
        <div class="form-group">
            <label>GroupID</label>
            <input type="text" name="id" v-model="id" class="form-control" required>
            <small class="form-text text-muted">建议全英文，不能包含@</small>
        </div>
        <div class="form-group">
            <label>GroupName</label>
            <input type="text" name="name" v-model="name" class="form-control" required>
            <small class="form-text text-muted">这个可以中文，目前仅作为描述字段</small>
        </div>
        <button type="submit" class="btn btn-default btn-outline-primary">创建组</button>
    </form>
    <div>
        <a href="/api/v1/user/groups">/api/v1/user/groups</a>
    </div>
</div>
{% end %}

{% block script %}
<script>
    new Vue({
        el: "#app",
        data: {
            id: "",
            name: "",
        },
        methods: {
            submit() {
                $.ajax({
                    method: "post",
                    url: "/api/v1/user/groups",
                    data: {
                        id: this.id,
                        name: this.name,
                    }
                }).done(ret => {
                    console.log(ret)
                    window.location.pathname = "/user"
                }).fail(ret => {
                    if (ret.status == 400) {
                        this.$message.error(ret.responseJSON.description)
                    } else {
                        this.$message.error(ret.responseText)
                    }
                })
            }
        }
    })
</script>
{% end %}